<template>
  <div style="opacity: 0.8">
    <el-card>
      <el-form :inline="true" :model="searchForm">
        <el-form-item v-if="userInfo.type==='2'" label="用户姓名">
          <el-select v-model="searchForm.name" placeholder="请选择" clearable>
          <el-option
            v-for="item in userData"
            :key="item.id"
            :label="item.name"
            :value="item.id">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item label="收支类型">
         <el-select v-model="searchForm.type" placeholder="请选择" clearable>
          <el-option
            label="会员消费"
            value="0">
          </el-option>
          <el-option
            label="会员充值"
            value="1">
          </el-option>
          <el-option
            label="薪资发放"
            value="2">
          </el-option>
          <el-option
            label="器材购入"
            value="3">
          </el-option>
        </el-select>
        </el-form-item>
        <el-form-item>
          <el-button @click="getData()">查询</el-button>
          <!-- <el-button
            @click="openDialog('添加器材信息', { a: '1' })"
            plain
            >添加</el-button
          > -->
        </el-form-item>
      </el-form>
      <!-- 数据列表-->
      <el-table
        :data="tableData"
        border
        class="table"
        ref="multipleTable"
        highlight-current-row
      >
        <el-table-column
          prop="user.name"
          label="姓名"
          min-width="60"
        ></el-table-column>
        <el-table-column
          prop="consumeDate"
          label="消费时间"
          min-width="140"
        ></el-table-column>
        <el-table-column
          prop="amount"
          label="消费金额"
          min-width="80"
        ></el-table-column>
        <el-table-column
          prop="consumeContent"
          label="消费内容"
          min-width="140"
        ></el-table-column>
          <el-table-column
          prop="type"
          label="收支类型"
          min-width="80"
        >
          <template slot-scope="scope">
              <span  v-if="scope.row.type == '3'">器材购入 </span>
              <span  v-if="scope.row.type == '2'">薪资发放 </span>
              <span  v-if="scope.row.type == '1'">会员充值</span>
              <span  v-if="scope.row.type == '0'">会员消费 </span>
          </template>
        </el-table-column>
         <el-table-column
          prop="approvalStatus"
          label="审核状态"
          min-width="80"
        >
          <template slot-scope="scope">
              <span style="color:red" v-if="scope.row.approvalStatus == '2'">审批未通过</span>
              <span style="color:green" v-if="scope.row.approvalStatus == '1'">审批通过</span>
              <span style="color:blue" v-if="scope.row.approvalStatus == '0'">未审批</span>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <div class="pagination">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          :page-sizes="pageSizes"
          :page-size="PageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="tableData.length"
        >
        </el-pagination>
      </div>
    </el-card>
  </div>
</template>

<script>
import webservice from "../../utils/webservice";
export default {
  data() {
    return {
      searchForm: {},
      tableData: [],
      dialogFormVisible: false, //添加编辑的模态框标识
      editApprovalForm: {
       
      }, //编辑信息的表单
      // 默认显示第几页
      currentPage: 1,
      // 个数选择器（可修改）
      pageSizes: [1, 5, 10, 20],
      // 默认每页显示的条数（可修改）
      PageSize: 5,
      userData:[],
      userInfo:{}
    };
  },
  mounted() {
    this.userInfo = JSON.parse(sessionStorage.getItem('userInfo'))
    this.getData();
    this.getUserData()

  },
  methods: {
    // 分页
    // 每页显示的条数
    handleSizeChange(val) {
      // 改变每页显示的条数
      this.PageSize = val;
      console.log(this.pageSizes);
      // 注意：在改变每页显示的条数时，要将页码显示到第一页
      this.currentPage = 1;
    },
    // 显示第几页
    handleCurrentChange(val) {
      // 改变默认的页数
      this.currentPage = val;
    },
    //获取信息
    getData() {
      if(this.userInfo.type!='2'){
        var _param = {
        userId: this.userInfo.id,
        type: this.searchForm.type,
      };
      }else{
        var _param = {
        userId: this.searchForm.name,
        type: this.searchForm.type,
      };
      }
      
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/consumeRecord/selectConsumeRecordInfoList", params, (data) => {
        if (data.code === 200) {
          this.tableData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
    getUserData() {
      let _param = {
      };
      const params = JSON.stringify(_param)
      webservice.HttpPost("/api/user/selectUserInfoList", params, (data) => {
        if (data.code === 200) {
          this.userData = data.data;
        } else {
          this.$message.error({
            message: data.message,
            showClose: true,
            duration: 1000,
          });
        }
      });
    },
  },
};
</script>

<style>
</style>